<template>
  <div class="page">
    <van-loading v-if="lotteryData.list.length === 0" size="18px" text-size="14px" class="all-center">
      加载中...
    </van-loading>
    <van-grid :border="false" :column-num="3">
      <van-grid-item v-for="item in lotteryData.list" :key="item.id" @click="toGameDetail(item)">
        <van-image class="img" :src="item.image" fit="cover"></van-image>
        <span>{{ item.name }}</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import type { ShallowRef } from 'vue'
import gameApi from '@/api/game'
import type { GameItemModel, GetGameListDataModel } from '@/types/game.types.ts'
import { GAME_TYPE } from '@/types/game.types.ts'
import { useGameStore } from '@/store/game'
const gameStore = useGameStore()

export interface TabModel {
  name: string
  component: ShallowRef<Component> | null
  activeIcon: string
}

export interface TabsModel {
  active: number
  list: TabModel[]
}
const lotteryData = reactive<GetGameListDataModel>({
  list: [],
  page: 1,
  totalCount: 0,
})

const init = async () => {
  const res = await gameApi.getGameList({ type: 3, limit: 100 })
  Object.assign(lotteryData, res.data)
}

const toGameDetail = (item: GameItemModel) => {
  gameStore.toPlay({ id: item.id, type: GAME_TYPE.lottery, code: item.code, game_company_code: item.game_company_code })
}
init()
</script>

<style scoped lang="scss">
.page {
  width: 100%;
  box-sizing: border-box;

  margin-top: var(--u-large-vertical-spacing);
  :deep(.van-grid-item__content) {
    padding: 0;
  }

  .img {
    box-sizing: border-box;
    width: 210px;
    height: 262px;
    margin: 10px 0;
    border-radius: var(--u-small-rounded);
    overflow: hidden;
  }

  span {
    position: absolute;
    width: 100%;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    text-align: center;
    text-shadow: var(--u-default-shadow);
    font-family: 'PingFang SC';
    font-size: var(--u-default-text-size);
    font-weight: 500;
  }
}
</style>
